<template>
  <div class="home-wrapper">
    <div class="bg"></div>
    <!-- <div class="title"></div> -->
    <div class="top-part">
      <image class="avatar" :src="avatarUrl"></image>
      <div class="text-area">
        <text class="title">111rrr</text>
      </div>
      <div class="text-area">
        <text class="title">{{ title }}</text>
      </div>
      <div class="text-area">
        <text class="title">{{ userName }}</text>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {
      title: "age",
    };
  },
  computed: {
    ...mapState(["userName"]),
  },
  onShow() {
    // uni.$on("getInfo", (msg) => {
    //   this.title = msg;
    // });
	console.log('name',this.userName);
  },
  methods: {
    ...mapActions(["login", "logout"]),
    gotoFeeds(url) {
      uni.switchTab({
        url,
      });
    },
    jumpTo() {
      uni.switchTab({
        url: "/pages/today/today",
      });
    },
  },
};
</script>

<style lang="scss">
.home-wrapper {
  position: relative;
  height: 100vh;
  margin-top: 100rpx;
  // .bg {
  // 	width: 100%;
  // 	height: 100%;
  // 	// background: url("http://n.sinaimg.cn/sinacn10113/247/w690h1157/20190914/ae26-iepyyhi4701592.jpg") no-repeat center / auto 100%;
  // 	background: url("https://s2.loli.net/2023/03/29/DejRtcXoMhYdKTZ.jpg") no-repeat center / auto 100%;
  // 	filter: blur(8rpx);
  // }

  .top-part {
    position: absolute;
    left: 0;
    right: 0;
    top: 29%;
    transform: translateY(-50%);
  }

  .avatar {
    display: block;
    overflow: hidden;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    margin: auto;
    border: 2rpx solid rgb(238, 164, 103);
  }

  .text-area {
    font-size: 30rpx;
    color: #df9aa3;
    padding: 10rpx 8rpx;
    margin: 40px 60rpx;
    font-weight: bold;
    text-align: center;
    line-height: 48rpx;
    background: #ffffff52;
    border-radius: 10rpx;
  }

  .btn-box {
    position: absolute;
    bottom: 370rpx;
    left: 0;
    right: 0;
    margin: auto;

    .btn-today,
    .btn-other {
      width: 300rpx;
      height: 100rpx;
      background: #8ab0c6a4;
      border-radius: 10rpx;
      margin: 20px auto;
      text-align: center;
      line-height: 100rpx;
      color: #fff;
      font-weight: bold;
    }
  }
}
</style>